<template>
	<view class="deta">
		<image v-if="detail&& detail.cover" :src="$img(detail.cover)" mode="widthFix" class="img" />
		<view class="deta_con">
			<view class="top">
				<text class="t_tit" v-if="detail && detail.title">{{ detail.title || '' }}</text>
				<text class="t-price" v-if="detail &&detail.type != 1">￥{{ detail.price }}</text>
			</view>
			<view class="t_kad">
				<text class="kad-name">课程时间：</text>
				<text class="k-value" v-if="detail && detail.start_at">{{ detail.start_at }}</text>
				<text class="k-value" v-else>暂未设置时间</text>
			</view>
			<view class="t_kad">
				<text class="kad-name">上课位置：</text>
				<text class="k-value" v-if="detail && detail.location">{{ detail.location }}</text>
				<text class="k-value" v-else>暂未更新位置</text>
			</view>
		</view>
		<view class="fwenben" v-if="detail">
			<view class="column">
				<video v-if="detail && detail.video" :src="$img(detail.video)" style="width: 100%;"></video>
				<image v-for="(v,i) in detail.img" :key="i" :src="$img(v)" mode="widthFix" />
			</view>
			<view class="nodes_box">
				<rich-text :nodes="nodes"></rich-text>
			</view>
		</view>
		<view class="bottom between align-c" @click="$to(`/pages/home/overt/enroll_list?type=${type}&id=${id}`)">
			<view class="flex align-c">
				<u-avatar-group :urls="urls" :showMore="showMore" size="24" gap="0.4" ></u-avatar-group>
				<view class=""><text class="text_num">{{ count }}</text>人已报名</view>
			</view>
			<view class="flex align-c">
				<view>查看更多</view>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		<view class="place"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				urls: [],
				count: 1,
				showMore: false,
				id: '',
				type: '',
				detail: null,
				isShowPrice: false,
				imgList: [],
				nodes: '',
			}
		},
		onLoad(e) {
			this.id = e.id;
			if(e && e.type) {
				this.type = e.type;
			}
			this.getDetail();
		},
		methods: {
			async getDetail() {
				let res = await this.$api.get(`staff/${this.type == 2?'course':'public'}/detail/${this.id}`);
				if(res.code == 200) {
					// console.log(res,111);
					this.detail = res.data.info;
					this.nodes = res.data.info.detail;
					this.imgList = res.data.info.img;
					this.count = res.data.count;
					var arr = res.data.users,list=[];
					if(arr && arr.length) {
						arr.forEach(v => {
							var url = require('@/static/head.png')
							list.push(v.user.avator ? v.user.avator : url)
						})
						this.urls = list;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.deta{
		.img {
			width: 100%;
			height: 533rpx;
			
		}
		.fwenben{
			background-color: #fcfcfc;
			margin-top: 30rpx;
			font-size: 27rpx;
			image{
				width: 100%;
				max-width: 100%;
				height: 750rpx;
			}
			.nodes_box {
				padding: 27rpx;
			}
		}
		.deta_con{
			width: 95%;
			margin: auto;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 20rpx;
			.t_kad{
				display: flex;
				font-size: 27rpx;
				align-items: center;
				padding: 15rpx 20rpx;
				.kad-name{
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.k-value{
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;
				.t_tit{
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.t-price{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #F51B1B;
				}
			}
		}
	}
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding: 0 50rpx;
		font-size: 24rpx;
		.text_num {
			margin-left: 12rpx;
			color: #F17816;
		}
		.into {
			width: 11rpx;
			height: 26rpx;
			margin-left: 12rpx;
		}
	}
	.place {
		display: block;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
